<template>
  <!-- <div class="content">
    <el-card class="card"> -->
  <LayoutContent>
    <div class="button">
      <div class="detail">批量新增</div>
      <div>
        <el-button type="primary" @click="clickHandle('batch')">保存</el-button>
        <el-button @click="clickHandle('back')">返回</el-button>
      </div>
    </div>
    <div class="form">
      <el-form :model="form" :rules="rules" ref="formInstall">
        <el-table :data="form.tableData" style="width: 100%" border :header-cell-style="{ height: '25px', fontSize: '15px', backgroundColor: '#f2f2f2' }">
          <el-table-column align="center" label="#" width="80">
            <template #default="{ row, $index }">
              <template v-if="form.tableData.length - 1 === $index">
                <el-icon style="margin-right: 15px; cursor: pointer" @click="clickHandle('add')"><Plus /></el-icon>
              </template>
              <el-icon style="cursor: pointer" @click="clickHandle('minu', $index)"><Minus /></el-icon>
            </template>
          </el-table-column>
          <el-table-column align="center" :prop="item.prop" :label="item.label" v-for="(item, index) in headerList" :key="index">
            <template #default="{ row, $index }">
              <el-form-item :prop="`tableData.${$index}.${item.prop}`" :rules="rules[item.prop]">
                <el-input v-model.trim="row[item.prop]" placeholder="请输入" clearable />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </LayoutContent>
  <!-- </el-card>
  </div> -->
</template>

<script setup>
import { Plus, Minus } from '@element-plus/icons-vue'
import { reactive, ref, inject } from 'vue'
import { useRouter } from 'vue-router'
import { batchAddApi } from '@/api/class/index'

const identity = inject('identity')
const headerList = reactive([
  {
    prop: 'name',
    label: '班级',
  },
  {
    prop: 'des',
    label: '描述',
  },
  {
    prop: 'total',
    label: '人数',
  },
])
const form = ref({
  tableData: [
    {
      des: '',
      name: '',
      total: 45,
    },
  ],
})
const formInstall = ref(null)
const rules = reactive({
  name: [{ required: true, message: '请输入班级', trigger: ['blur', 'change'] }],
  des: [{ required: true, message: '请输入描述', trigger: ['blur', 'change'] }],
  total: [{ required: true, message: '请输入人数', trigger: ['blur', 'change'] }],
})

const router = useRouter()
const clickHandle = (type, index) => {
  switch (type) {
    case 'add':
      form.value.tableData.push({ des: '', name: '', total: 45 })
      break
    case 'minu':
      if (form.value.tableData.length > 1) {
        form.value.tableData.splice(index, 1)
      }
      break
    case 'batch':
      submit()
      break
    case 'back':
      router.back()
      break
  }
}

const submit = async () => {
  if (!formInstall.value) return
  await formInstall.value.validate(async (valid, fields) => {
    if (valid) {
      const res = await batchAddApi(form.value.tableData, identity)
      if (res.code == 200) {
        ElMessage.success(res.msg)
        form.value.tableData = {}
        router.back()
      } else {
        ElMessage.error(res.msg)
      }
    }
  })
}
</script>

<style scoped lang="scss">
.content {
  .card {
    height: 100%;
    .button {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 2px solid #eee;
    }
    .form {
      margin-top: 10px;
    }
  }
}
</style>
